<template>
  <view class="custom-tabbar">
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'home' }"
      @tap="switchTab('home')"
    >
      <text class="tab-icon">🏠</text>
      <text class="tab-text">首页</text>
    </view>
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'workbench' }"
      @tap="switchTab('workbench')"
    >
      <text class="tab-icon">⚙️</text>
      <text class="tab-text">工作台</text>
    </view>
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'mine' }"
      @tap="switchTab('mine')"
    >
      <text class="tab-icon">👤</text>
      <text class="tab-text">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  props: {
    // 当前激活的标签：'home' | 'workbench' | 'mine'
    active: {
      type: String,
      default: 'workbench'
    }
  },
  computed: {
    currentTab() {
      return this.active
    }
  },
  methods: {
    switchTab(tab) {
      // 如果点击的是当前页面，不做跳转
      if (tab === this.currentTab) return
      
      const urlMap = {
        home: '/pages/index/index',
        workbench: '/pages/workbench/workbench',
        mine: '/pages/mine/mine'
      }
      
      // 使用 switchTab 跳转到 tabBar 页面
      uni.switchTab({
        url: urlMap[tab],
        fail: () => {
          // 如果 switchTab 失败，使用 redirectTo
          uni.redirectTo({
            url: urlMap[tab]
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #6b7280;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #2563eb;
}

.tab-icon {
  font-size: 36rpx;
  transition: transform 0.3s ease;
}

.tab-item.active .tab-icon {
  transform: scale(1.1);
}

.tab-text {
  font-size: 20rpx;
}

.tab-item.active .tab-text {
  font-weight: 500;
}
</style>

